<template>
    <view>
      <up-tabbar :value="useStore.activeTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
        <up-tabbar-item v-for="(item, index) in tabbarItems" :key="index" :icon="getTabbarIcon(item, index)" :text="item.text" @click="handleTabbarItemClick(item, index)"></up-tabbar-item>
      </up-tabbar>
    </view>
  </template>
   
  <script setup>
  //引入pinia仓库
  import useUserStore from '@/store/user.js'
  let useStore = useUserStore()
   
  const tabbarItems = [
				{
					"pagePath": "../../pages/index/index",
					"iconPath":"map",
					"selectedIconPath":"map-fill",
					"text": "寻梦"
				}, {
					"pagePath": "../../pages/test_page/index",
					"iconPath":"gift",
					"selectedIconPath":"gift-fill",
					"text": "创作"
				}, {
					"pagePath": "../../pages/user/index",
					"iconPath":"account",
					"selectedIconPath":"account-fill",
					"text": "我的"
				}
			]
  //点击tabbar按钮
  const handleTabbarItemClick = (item, index) => {
    if (useStore.activeTab !== index) {
        useStore.setActive(index)
        const path = item.pagePath
        // console.log(path)
        uni.switchTab({
          url: path
        })
    }
  }
  //图标的切换
  const getTabbarIcon = (item, index) => {
    return useStore.activeTab === index ? item.selectedIconPath : item.iconPath
  }
  </script>